<template>
  <el-header class="right-header" height="max-content">
    <Header />
  </el-header>
  <div class="container-box">
    <el-card>
      <div class="flex items-center justify-between pb-2">
        <div
          class="flex w-[70%] items-center justify-start headerCont_cryptoTotal"
        >
          <div class="flex-1">
            <h2 class="mb-2 text-xl text-color1">
              {{ $t("资产总额") }}({{ coin_name }})
            </h2>
            <div>
              <p class="text-xl">
                {{ numberToCurrencyNo(merOverview.total_asset) }}
              </p>
            </div>
          </div>
          <div class="flex-1">
            <h2 class="mb-2 text-xl text-color1">
              {{ $t("可用资产") }}({{ coin_name }})
            </h2>
            <div>
              <p class="text-xl">
                {{ numberToCurrencyNo(merOverview.available) }}
              </p>
            </div>
          </div>
          <div class="flex-1">
            <h2 class="mb-2 text-xl text-color1">
              {{ $t("冻结资产") }}({{ coin_name }})
            </h2>
            <div>
              <p class="text-xl">
                {{ numberToCurrencyNo(merOverview.freeze) }}
              </p>
            </div>
          </div>
        </div>
        <div class="">
          <el-button class="detailBtn" @click="$router.push('/wallet')"
            >{{ $t("查看详情")
            }}<el-icon class="ml-2" color="#4684fe"><ArrowRight /></el-icon
          ></el-button>
        </div>
      </div>
    </el-card>
    <div class="grid grid-cols-4 gap-6 mt-4">
      <el-card
        v-for="item in countList"
        :key="item"
        class="flex-1 py-4 customCard h-[110px]"
      >
        <div class="h-[80px]">
          <div class="flex flex-col items-start justify-between h-[60%]">
            <div class="flex items-start justify-between w-full">
              <p class="flex-1 text-base text-color1">
                {{ item.title }}
              </p>
              <p
                class="flex w-[60px] justify-end items-center text-[#4684fe] text-base cursor-pointer"
                @click="toUserList(item)"
              >
                {{ $t("查看")
                }}<el-icon color="#4684fe"><ArrowRight /></el-icon>
              </p>
            </div>
          </div>
          <p class="mt-2 text-xl font-medium">{{ item.count }}</p>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import { GetOverview } from "@/api/dashboard/index";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { useRouter } from "vue-router";
const router = useRouter();
import { numberToCurrencyNo } from "@/utils/utils";

const loading = ref(true);
const countList = computed(() => {
  return [
    {
      title: `${t("用户数量")}`,
      count: userOverview.value.user_count || 0,
      toPath: "/account/customer",
    },
    {
      title: `${t("用户总资产")}(USDT)`,
      count: numberToCurrencyNo(userOverview.value.user_total_asset) || 0,
      toPath: "/account/customer",
    },
    {
      title: `${t("用户总接收数量")}(USDT)`,
      count: numberToCurrencyNo(userOverview.value.user_total_receive) || 0,
      toPath: "/account/customer",
    },
    {
      title: `${t("用户总发送数量")}(USDT)`,
      count: numberToCurrencyNo(userOverview.value.user_total_send) || 0,
      toPath: "/account/customer",
    },
    {
      title: `${t("待审核订单")}(USDT)`,
      count: numberToCurrencyNo(userOverview.value.awaiting_review) || 0,
      toPath: "/account/customer",
      isTrue: true,
    },
  ];
});

const merOverview = ref({});
const userOverview = ref({});
const coin_name = ref("");
const getStatisticsData = async () => {
  try {
    loading.value = true;
    const res = await GetOverview();
    merOverview.value = res.mer || {};
    userOverview.value = res.user || {};
    coin_name.value = res.coin_name || {};
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

getStatisticsData();

const toUserList = (item) => {
  if (item.isTrue) {
    localStorage.setItem("isTrue", item.isTrue);
  }
  router.push(item.toPath);
};
</script>
<style lang="scss" scoped>
.detailBtn {
  color: #4684fe;
  height: 40px;
  border-color: #4684fe;
  border-radius: 5px;
}
</style>
